

<template>
    <section class="goods-sale">
    
        <section class="goods-sale-detail">
    
            <h4 class="goods-sale-detail-name">{{item.name}}</h4>
    
            <p class="goods-sale-detail-time">{{item.year}}</p>
    
            <p class="goods-sale-detail-text">{{item.text}}</p>
    
            <price :price="item.price"></price>
    
            <span class="goods-sale-detail-old-price">￥{{item.oldPrice}}.00</span>
    
        </section>
    
        <section class="goods-sale-thumb">
    
            <img :src="item.thumb" alt="">
    
        </section>
    
    </section>
</template>
<script>
    import price from "../../../components/price/price";
    
    export default {
    
        props: {
            item:{
                type:Object,
                default:function(){
                    return {}
                }
            }
        },
    
        components: {
    
            price,
    
        }
    
    }
</script>
<style lang="scss">
    @import "../../../assets/scss/_index.scss";
    
    .goods-sale {
    
        display: flex;
    
        justify-content: space-around;
    
        align-items: center;
    
        width: 50%;
    
        height: px2rem(200);
    
        padding-right: px2rem(10);
    
        padding-left: px2rem(10);
    
        // margin-bottom: px2rem(17);
    
        &-detail {
    
            &-name {
    
                font-size: px2rem(24);
    
                color: #535353;
    
                margin-bottom: px2rem(18);
    
            }
    
            &-time {
    
                font-size: px2rem(20);
    
                color: #535353;
    
                margin-bottom: px2rem(8);
    
            }
    
            &-text {
    
                font-size: px2rem(22);
    
                color: #535353;
    
                margin-bottom: px2rem(14);
    
            }
    
            &-old-price {
    
                font-size: px2rem(16);
    
                color: #a0a0a0;
    
                margin-top: px2rem(18);
    
            }
    
        }
    
        &-thumb {
    
            width: px2rem(160);
    
            height: px2rem(123);
    
            align-self: center;
    
            img {
    
                width: 100%;
    
            }
    
        }
    
        &:nth-of-type(2n-1) {
    
            border-right: 1px solid #cccccf;
    
        }
    
    }
</style>
